<template>
  <!-- 主评论 -->
  <div class="main">
    <div class="commentinfo">
      <div class="infoimg">
        <img src="../../assets/none.jpg" alt />
      </div>
      <div class="info">
        <div class="nickname">{{commten.user.nickname}}</div>
        <div class="time">{{commten.create_date.split('T')[0]}}</div>
      </div>
      <div class="reply" @click="mainReply">回复</div>
    </div>

    <parents :parentext="commten.parent" v-if="commten.parent" @parentReplyReplyTh="parentsdatath" />
    <div class="content">新回复: {{commten.content}}</div>
  </div>
</template>

<script>
import parents from "../comment/parents";
export default {
  props: ["commten"],
  components: {
    parents
  },
  methods: {
    mainReply() {
      this.$emit("maincomtent", {
        id: this.commten.id,
        name: this.commten.user.nickname
      });
    },
    parentsdatath(parentsdata) {
      this.$emit("maincomtent", parentsdata);
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  padding: 26px 0 0;
  border-bottom: 1px solid #e4e4e4;

  .commentinfo {
    display: flex;
    .infoimg {
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
      border-radius: 50%;
    }
    .info {
      flex: 1;
      margin-left: 6px;
      .nickname {
        font-size: 14px;
        color: #555;
      }
      .time {
        font-size: 12px;
        color: #888;
      }
    }
    .reply {
      font-size: 14px;
      color: #888;
    }
  }
  .content {
    font-size: 14px;
    margin: 10px 0;
    color: #333;
  }
}
</style>